<template>
<h1>猜数字练习</h1>
<!--  初始化 一个数字 88-->
<!--  用户猜  大了 还是小了 猜对 了-->
  <input type="text" placeholder="请输入1~100之间的整数" v-model="number"><br>
  <button @click="guess()">猜一猜</button><br>
  <hr>
  <el-input v-model="number" style="width: 240px" placeholder="请输入1~100之间的整数" /><br>
  <el-button type="primary" @click="guess()">猜一猜</el-button>

  <h1>{{result}}</h1>
  <el-icon><Search /></el-icon>
<!--  <el-icon><Aim /></el-icon>-->
</template>

<script setup>
//初始化 一个数字  随机数  [1 --111)
import {ref} from "vue";

var  x= parseInt(Math.random()*100)+1;
console.log(x);
//获取输入的数据
const number = ref("");
const result = ref("");
//猜数据函数
const guess = () =>{
  //parseInt:
//   parseInt 是一个全局函数，用于将字符串解析为整数。
// 它接受两个参数：
// 第一个参数是要解析的字符串。
// 第二个参数是解析时使用的进制（基数）
  const inputNumber = parseInt(number.value, 10);
  //isNaN  true  判断一个输入的内容 不是一个数据
  if (isNaN(inputNumber)) {
    result.value = "请输入数字";
    return;
  }
  if(number.value > x){
    result.value="猜大了"
  }else if(number.value < x){
    result.value="猜小了"
  }else{
    result.value="猜对了"
  }
}
</script>

<style scoped>

</style>